<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="父级" prop="pid">
                <el-input v-model="queryParams.pid" placeholder="请输入父级名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['mall:mallSpec:add']">新增</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tree :data="typeList" :props="defaultProps" node-key="id" :expand-on-click-node="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <!-- data -->
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button size="small" icon="Plus" @click="handleAdd(data)"
                            v-hasPermi="['system:type:add']">新增</el-button>
                        <el-button size="small" icon="Edit" @click="handleUpdate(data)"
                            v-hasPermi="['system:type:edit']"><span>修改</span></el-button>
                        <el-button size="small" icon="DeleteFilled" @click="handleDelete(data)"
                            v-hasPermi="['system:type:remove']"><span>删除</span></el-button>
                    </span>
                </span>
            </template>
        </el-tree>



        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="typeRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="父级" prop="pid">
                    <el-tree-select v-model="form.pid" :data="typeOptions" :props="{
            value: 'id',
            label: 'name',
            children: 'children',
        }" placeholder="请选择父级" />
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="详情" prop="detail">
                    <el-input v-model="form.detail" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="排序" prop="orderBy">
                    <el-input-number v-model="form.orderBy" :min="1" :max="9999999999999"
                        label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="唯一标识" prop="code">
                    <el-input v-model="form.code" placeholder="请输入唯一标识" />
                </el-form-item>
                <el-form-item label="分类图片" prop="iconUrl">
                    <ImageUpload v-model="form.iconUrl" v-if="form.pid != 93"></ImageUpload>
                    <ImageCropUpload v-model="form.iconUrl" :width="355" :height="120" :enlarge="3" v-else>
                    </ImageCropUpload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Type">
import {
    listType,
    addType,
    updateType,
    getType,
    delType
} from "@/api/system/type"

const { proxy } = getCurrentInstance();

const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const title = ref("");
const defaultProps = {
    children: 'children',
    label: 'name'
}
const typeList = ref([])
const typeOptions = ref([])

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        pid: null,

    },
    rules: {
        name: [
            {
                required: true,
                message: '请输入名称',
                trigger: 'blur',
            },
        ],
        code: [
            {
                required: true,
                message: '请输入唯一标识',
                trigger: 'blur',
            },
        ],
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询商品规格属性列表 */
function getList() {
    loading.value = true;
    listType(queryParams).then(response => {
        console.log(response, '获取分类列表')
        typeList.value = proxy.handleTree(response.data, "id", "pid");
        console.log(typeList.value, 'typeList.value')
        loading.value = false;
    });
}

/** 查询type下拉树结构 */
function getTreeselect() {
    listType().then(response => {
        typeOptions.value = [];
        const data = {
            id: 0,
            name: '顶级节点',
            children: []
        };
        data.children = proxy.handleTree(response.data, "id", "pid");
        console.log(data, 'data')
        typeOptions.value.push(data);
    });
}

function handleUpdate(row) {
    console.log(row, '修改')
    reset();
    getTreeselect();
    if (row != null) {
        form.value.pid = row.id;
    }
    getType(row.id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改分类";
    });
}


// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        pid: null,
        name: null,
        detail: null,
        orderBy: null,
        code: null,
        iconUrl: null,
    };
    proxy.resetForm("typeRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 新增按钮操作 */
function handleAdd(row) {
    console.log(row, '新增')
    reset();
    getTreeselect();
    if (row != null && row.id) {
        form.value.pid = row.id;
    } else {
        form.value.pid = 0;
    }
    open.value = true;
    title.value = "添加分类";
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["typeRef"].validate(valid => {
        if (valid) {
            if (form.value.id != null) {
                updateType(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addType(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除规格编号为"' + _ids + '"的数据项？').then(function () {
        return delType(_ids);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

getList();
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>